<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<link rel="stylesheet" type="text/css" href="css/2.css"/>
<title>九宫格 抽奖转盘演示</title>

</head>
<body>
<div class="web">
		
	
	
	<header>
		
	 	
	 		<div id="main" class=" ">  
	 			<!--规则	左上角-->
           	 <a class="icon_2_3"  href="javascript:showBg();"></a>  
          		<!--规则说明	弹窗-->
            <div id="dialog">
            	
                    <a href="#" onclick="closeBg();">
                    <div class="icon_2_6">
                    	<img src="img/2_6.png"/>
                    </div>
                    </a>
                    <!--内容-->
                    
                    <h4 class="state">
                    	规则说明
                    </h4>
                   	<div class="rule">
                   		<p>
                   			1. 每个ID只有1次抽奖机会，100%中奖。
                   		</p>
                   		<p>
                   			2.中奖后，请与哔帮小秘书联系，告知奖品收货地址，我们将会在活动结束48小时内送出。
                   		</p>
                   		<p>
                   			3.所有奖品免费领取，奖品的快速由消费者承担，如果没有与小秘书特别说明，我们默认以顺丰到付的形式寄出。
                   		</p>         		
                   	</div>  
                   	<p class="copyright">
                   		活动最终解析权归广州顺代邦网络科技有限公司所有
                   	</p>
                   	<div class="logo">
                   		<img src="img/2_7.png"/>
                   	</div>
            </div>  
        	</div>
	 	
	
		<!--<div id="Left" class="top_left"  onclick="closeBg();">
			
		</div>		-->
		
			<div id="audio_btn" class="rotate">
    		 <audio loop src="music/munsic.mp3" id="media" autoplay="" preload=""></audio>
			</div>
		
		
		
		
	</header>
	
	
	<ul id="content">		
			<li  class=""><img src="img/jiugongge/1.png" ></li>
			<li  class=""><img src="img/jiugongge/2.png" ></li>
			<li  class=""><img src="img/jiugongge/3.png" ></li>
			<li  class="current" ><img src="img/jiugongge/4.png"></li>		
			<li  class=""><img src="img/jiugongge/6.png" ></li>
			<li  class=""><img src="img/jiugongge/7.png" ></li>
			<li  class=""><img src="img/jiugongge/8.png" ></li>
			<li  class=""><img src="img/jiugongge/9.png" ></li>
	</ul>
		<a href="#" id="begin">
	<!--<img src="img/jiugongge/5.png"/>-->
				<div class="begin_img"><img src="img/jiugongge/5.png"></div>
					
					<div id="lift" onclick="myname()" class="Christmas">
						开
					</div>
					<div id="rigth"onclick="myname()" class="Christmas">
						始
					</div>
				
</a>
			


</div>
<!--<script src="js/shake.js" type="text/javascript" charset="utf-8"></script>-->
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//	var Christmas=document.getElementsByClassName("Christmas");
//	var btn=document.getElementsByTagName("button")[0];
//				
//				Christmas[0].onclick=function(){
//				
//				    setTimeout(function () {
//				        
//				        location.href = "3.html";
//				    }, 4000);					
//				}
//			Christmas[1].onclick=function(){
//				
//				    setTimeout(function () {
//				        
//				        location.href = "3.html";
//				    }, 4000);					
//				}
	
	
  function run() {
				var list = getId('content').children,//遍历，获取所以子元素
					len = list.length,			//子元素长度
					begin = getId('begin'),
					index = 0,					//下标
					turnTime=null			//转动时间
					
				begin.onclick = function() {
					//turn   转
					
					//this.turn值为空，直接结束
					//开关	为了不能重复点击
					if(this.turn){
						return;
					} 
					//变为真(true)
					this.turn = true;
//					随机选择的数
					this.remain = 3000 + Math.random()*1000 ;
					
					//周期
					turnTime = setInterval  (function() {//setTimeoutl
					
						//remain
						if(begin.remain < 200) {
							//为了再次抽奖，要把begin.turn变为false，否则只能抽一次
							begin.turn = false;
							//停止转动	清除定时器
							clearInterval(turnTime);
//							alert(list[index].innerHTML)
						}					
						else {
							list[index].className = "";
							list[(index + 1) % len].className = "current";	
							
							index =++index% len;
							//每步减33，直到200，运行begin.remain < 200
							begin.remain += 33;
						}
					},75);
				};
			}
			
			run();
			
			function getId(id) {
				return document.getElementById(id)
			};
				
				
function myname() {
    setTimeout(function () {
        var urls = ["3.html","3.1.html","3.2.html","3.3.html","3.4.html","3.5.html","3.6.html","3.7.html","3.8.html"];
        location.href = urls[Math.random()*urls.length>>0];
    }, 2000);
}



//弹窗
	//显示 jQuery 遮罩层   
        function showBg() {  
            var bh = $("#main").height();  
            var bw = $("#main").width();  
            $("#fullbg").css({  
                height: bh,  
                width: bw,   
                display: "block"  
            });  
            $("#dialog").show();  
        }  
        //关闭 jQuery 遮罩   
        function closeBg() {  
            $("#fullbg,#dialog").hide();  
        }  





//音乐
//$("#audio_btn").click(function(){
//   $(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
//});
 var x = document.getElementById("media"); 
  $(function(){
      $("#audio_btn").click(function(){
          $(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
          
          //控制背景音乐 播放或暂停            
          if($(this).hasClass("rotate")){
              x.play();
          }else{
             x.pause();
         }
     })
 });

var lift = document.getElementById("lift");
var rigth = document.getElementById("rigth");
	var b;
	setInterval(function() {
		// 根据a的值，做不同的设置	
		lift.style.left = (b ?20:15) + 'px';
		b = !b;
	},200);
	
//
	var c;
	setInterval(function() {
		// 根据a的值，做不同的设置	
		rigth.style.left = (c ?55:65) + 'px';
		c = !c;
	},200);
	

</script>
<script>
			document.body.style.height = window.innerHeight + "px";

			/*动态改变根元素字体大小*/
			function recalc() {
				var clientWidth = document.documentElement.clientWidth;
				if(!clientWidth) return;
				document.documentElement.style.fontSize = 40 * (clientWidth / 640) + 'px';
				//字体大小   =1个rem单位表示多少个像素*(设备的宽度 /设计宽度)
			}

			function initRecalc() {
				recalc();
				var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
				if(!document.addEventListener) return;
				window.addEventListener(resizeEvt, recalc, false);
				document.addEventListener('DOMContentLoaded', recalc, false);
			}
			initRecalc();
	</script>
</body>
</html>